import { memo, useEffect, useRef, useState } from "react";
import { ReqGetList } from "../../request/request";
import Style from "./index.module.scss";
import { useDispatch, useSelector } from "react-redux";
import { getList, setRowList } from "../../reducer/list";
import { getParam } from "../../reducer/param";
import { getListScrollState, setListScroll } from "../../reducer/listScroll";
import classNames from "classnames";
// import { ListType } from "../../reducer/list";
const List = memo(() => {
  const [isScroll, setScroll] = useState(false);
  const dispatch = useDispatch();
  const param = useSelector(getParam());
  const list = useSelector(getList());
  const timer = useRef(0);
  const scrollState = useSelector(getListScrollState());

  const fetchData = async () => {
    const { data } = await ReqGetList();
    console.log("fetchData list", data);
    // setList(JSON.parse(data));
    dispatch(setRowList(data));
  };

  const handleScroll = () => {
    if (!isScroll) {
      setScroll(true);
      dispatch(setListScroll(true));
    }
    clearTimeout(timer.current);
    timer.current = setTimeout(() => {
      dispatch(setListScroll(false));
      setScroll(false);
    }, 500);
  };

  useEffect(() => {
    fetchData();
  }, [param]);
  return (
    <div
      className={classNames(Style.list, {
        [Style.moving]: scrollState,
      })}
      onScroll={() => handleScroll()}
    >
      {list.map((item) => (
        <div key={item.id} className={Style.list_item}>
          <div className={Style.list_info}>
            <div className={Style.info}>
              <div className={Style.start}>
                <div className={Style.time}>{item.startTime}</div>
                <div className={Style.place}>{item.departureAirport}</div>
              </div>
              <div className={Style.icon}>
                <div className={Style.arrow_right}></div>
              </div>
              <div className={Style.end}>
                <div className={Style.time}>{item.endTime}</div>
                <div className={Style.place}>{item.landingAirport}</div>
              </div>
            </div>
            <div className={Style.flight_name}>{item.flightName}</div>
          </div>
          <div className={Style.price}>
            <div className={Style.num}>{item.price}</div>
            <div className={Style.desc}>{item.priceDesc}</div>
            <div className={Style.tips}>{item.tips}</div>
          </div>
        </div>
      ))}
      <div className={Style.bottom_pad}></div>
    </div>
  );
});

export default List;
